import 'braft-editor/dist/index.css'
import React from 'react'
import BraftEditor from 'braft-editor'
import {Input} from "antd";
import FormItemInput from "antd/lib/form/FormItemInput";

import SubmitBlog from "./SubmitBlog/SubmitBlog";
//import http from "../../../../../utils/Http/BootHttp";
import {apiArticleAdd} from "../../../../../request/ArticleAxios/ArticleAxios";
import AddAlterSuccess from "../../../../../utils/tools/AntdAlter/AddAlter/AddAlterSuccess";
import AddAlterFailure from "../../../../../utils/tools/AntdAlter/AddAlter/AddAlterFailure";

/*https://braft.margox.cn/demos/basic
  https://braft.margox.cn/
  https://www.yuque.com/braft-editor/be/lzwpnr
*/

let submittblogflag = false;
export default class BasicDemo extends React.Component {

    constructor(props) {
        super(props);
        //react定义数据
        this.state = {
            editorState: BraftEditor.createEditorState('<p>Hello <b>World!  11111</b></p>'), // 设置编辑器初始内容
            outputHTML: '<p></p>',
            ArticleWithBLOBs: {
                bid: "",
                auther: "",
                love: "",
                body: "",
                createdDate: "",
                forwarded: "",
                name: "",
                uid: "",
                blog: "",
                updateDate: "",
                watched: "",
                outputhtml: "qq",
                title: "111",
                operate: "qq",
            },
            isLivinig: true,

        };
        this.clickAddArticle = this.clickAddArticle.bind(this);
    }


    componentDidMount() {
        this.isLivinig = true
        // 3秒后更改编辑器内容
        setTimeout(this.setEditorContentAsync, 3000)
    }

    componentWillUnmount() {
        this.isLivinig = false
    }

    handleChange = (editorState) => {
        this.setState({
            editorState: editorState,
            outputHTML: editorState.toHTML()
        })
    }

    setEditorContentAsync = () => {
        this.isLivinig && this.setState({
            editorState: BraftEditor.createEditorState('<p>你好，<b>世界!</b><p>')
        })
    }

    clickAddArticle = () => {
        //https://blog.csdn.net/weixin_30416871/article/details/94885711
        const {outputHTML} = this.state

        const {ArticleWithBLOBs} = this.state
        ArticleWithBLOBs.outputhtml = outputHTML;


        apiArticleAdd(ArticleWithBLOBs).then(() => AddAlterSuccess()).catch(
            () => AddAlterFailure
        )
        /*
                http("get", "http://127.0.0.1:8081/getArticle", qs.stringify(userId))
        */

        /*        this.setState({
                    ArticleWithBLOBs: {
                        outputHTML: editorState.toHTML(),
                        title,
                        operate: "insert"
                    }
                })*/
        /*        const {ArticleWithBLOBs} = this.state
                alert(ArticleWithBLOBs)
                addArticle(ArticleWithBLOBs)*/

    }

    inputHandelChange(envent) {
        /*      错误方式
          this.setState({
                    ArticleWithBLOBs: {
                        "title": envent.target.value
                    }
                })*/
        /*
        https://blog.csdn.net/kevinx610/article/details/89945215

        */
        alert(envent.target.value)
        this.setState({title: envent.target.value})

    }

    render() {

        const {editorState, outputHTML} = this.state

        const formItemLayout = {

            labelCol: {span: 4},  // 左边留白大小
            wrapperCol: {span: 23}, // 内容区大小（两者和不能!>24）
        };


        return (
            <div>
                <FormItemInput {...formItemLayout} label="文章标题">
                    {(
                        <div>
                            <p hidden> 失去焦点触发事件 但是不能用 有错误</p>
                            <Input onBlur={this.inputHandelChange} size="large" placeholder="请 输 入 标 题"/>
                        </div>

                    )}
                </FormItemInput>
                <div className="editor-wrapper">
                    <BraftEditor
                        value={editorState}
                        onChange={this.handleChange}
                    />
                </div>
                <SubmitBlog submitflag={submittblogflag} parentAddArticle={this.clickAddArticle}/>
                <h5>输出内容</h5>
                <div className="output-content">{outputHTML}</div>

            </div>
        )

    }

}